<template>
  <a-space direction="vertical" style="width: 100%">
    <a-card title="应收款查询">
      <a-form :model="queryParams" layout="inline">
        <a-form-item label="选择客户">
          <CustomerSelection ref="csRef" :preload="true" @customerSelected="customerSelected" />
        </a-form-item>
        <a-form-item label="核销状态">
          <a-select v-model:value="queryParams.status" placeholder="选择状态">
            <a-select-option value="NEW">新建</a-select-option>
            <a-select-option value="PART">部分</a-select-option>
            <a-select-option value="DONE">完成</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit" @click="query">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="reset">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <!--      <a-divider style="border-color: #7cb305" dashed />-->
    <a-card title="查询结果">
      <a-table
        :columns="columns"
        :data-source="resultDataSet"
        rowKey="uid"
        :pagination="paginationConfig"
      >
        <template #status="{ record }">
          <span v-if="record.status === 'NEW'">新建</span>
          <span v-if="record.status === 'PART'">部分完成</span>
          <span v-if="record.status === 'DONE'">完成</span>
        </template>
      </a-table>
    </a-card>
  </a-space>
</template>

<script lang="ts" setup>
import { useReceiptListFunctions } from './arListFunctions'
import CustomerSelection from '@/components/chunfeng/customer/CustomerSelection.vue'

const {
  paginationConfig,
  queryParams,
  columns,
  reset,
  query,
  resultDataSet,
  customerSelected,
  csRef,
} = useReceiptListFunctions()
</script>
